<template>
	<view>
		<cc-custom-header title="设备列表" :isgoback="false" bgColor="#f0f0f0" color="#555555">
			<template v-slot:headRight>
				<view class="cc-rows cc-flex-vcenter" @click="addDevice">
					<text class="cc-size-30 cc-color-4c">添加设备</text>
				</view>
			</template>
		</cc-custom-header>
		<view class="cc-rows cc-nowrap cc-flex-vcenter cc-bg-white cc-height-80 col-100">
			<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="applist" @click="chooseApp" @close="selectClose(0)" ref="selectA">
				<view class="col-50 cc-rows cc-flex-center" style="margin: 0 auto;" @tap="openSelect(0)">
					<text class="">{{curselect.app_name}}</text>
					<view class="fui-filter__icon" :class="{'fui-icon__ani':showselect[0]}">
						<fui-icon name="turningdown" :size="32"/>
					</view>
				</view>
			</fui-dropdown-menu>
			<fui-dropdown-menu :minWidth="400" :size="28" selectedColor="#465CFF" :options="onlineSelect" @click="chooseOnline" @close="selectClose(1)" ref="selectB">
				<view class="col-50 cc-rows cc-flex-center" style="margin: 0 auto;" @tap="openSelect(1)">
					<text>{{curselect.online}}</text>
					<view class="fui-filter__icon" :class="{'fui-icon__ani':showselect[1]}">
						<fui-icon name="turningdown" :size="32"/>
					</view>
				</view>
			</fui-dropdown-menu>
		</view>
		<scroll-view scroll-y style="height: calc(100vh - 240rpx)">
			<view class="padding-20">
				<view class="cc-bg-white padding-20 margin-b20 border-radius-10"
				 v-for="(item,index) in listinfo" :key="index">
					<view class="cc-color-888 cc-size-24 cc-lineHeight-60">
						<text>设备编码：{{item.device_id}} </text>
						<text v-if="item.device_sn">(自定义：{{item.device_sn}})</text>
					</view>
					<view class="cc-size-24 cc-color-888 cc-lineHeight-60">服务节点：{{item.node_name}}</view>
					<view class="cc-rows cc-space-between cc-flex-vcenter cc-lineHeight-60 margin-b20">
						<view class="cc-size-24 cc-color-888">端口数量：{{item.port_count}}</view>
						<view class="cc-size-24" :class="item.online?'cc-color-success':'cc-color-danger'">
							<text class="iconfont">&#xe60f;</text>
							<text>{{item.online ? '在线' : '离线'}}</text> 
						</view>
						
					</view>
					<view class="cc-rows cc-space-between">
						<view>
							<fui-button type="warning" width="150rpx" height="44rpx" @click="gotoDetail(item.id)" :size="24" text="进入设备"/>
						</view>
						<view class="cc-rows cc-flex-end">
							<fui-button type="primary" width="120rpx" height="44rpx" @click="handleEdit(item)"
							 :margin="[0,'24rpx',0,0]" :size="24" text="编辑" background="#4cccc5"/>
							<fui-button type="danger" width="120rpx" height="44rpx" :size="24" text="删除" 
							color="#f66" borderColor="#f66" @click="showDialog(item)" plain/>
						</view>
			
					</view>
				</view>
			</view>
			
			
			<!-- 缺省页 -->
			<fui-empty src="../../static/image/404tp.png" isFixed color="#999" title="暂无数据" v-if="!listinfo.length" />
			<fui-loadmore v-if="showloadmore" activeColor="#FFB703" text="加载中..."/>
			<!-- <view class="showloadall" v-if="showloadall && device.length > 0" >加载完毕</view> -->
			<fui-dialog :show="show" :content="content" maskClosable @click="onClick" @close="onClose" :buttons="buttons"/>
		</scroll-view>
		
	</view>
</template>

<script>
	import {ref} from 'vue'
	import { useInfoStore } from '@/stores/info'
	export default {
		setup(){
			const listinfo = ref([])
			const appList = ref([])
			const sysinfo = uni.getSystemInfoSync()
			const storeInfo = useInfoStore()
			const showselect = ref([false,false])
			const applist = ref([])
			const show = ref(false)
			const content = ref('是否确定删除？')
			const buttons = ref([{text: '确定',color: '#4cccc5'}])
			const onlineSelect = ref([
				{text:'全部',value:0},
				{text:'在线',value:1},
				{text:'离线',value:2},
			])
			const curselect = ref({
				app_name:'选择应用',
				online:'全部'
			})
			const queryForm=ref({
				page:1,
				app_id:0,
				online:0 //1在线2离线
			})
			const isover=ref(false)
			const scrollTop=ref(0)
			const showloadmore=ref(false)//加载更多
			const old=ref({scrollTop: 0})
			return {
				delObj: {},
				refresherTrigger: false,
				listinfo,appList,onlineSelect,sysinfo,storeInfo,
				showselect,applist,curselect,scrollTop,old,
				queryForm,isover,show,buttons,content,showloadmore
			}
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onLoad() {
			
			this.loadData()
			this.getAppList()
		},
		onShow() {
			if (uni.getStorageSync('refresh-device-list')) {
				this.loadData()
			}
		},
		methods: {
			//对话框删除接口
			showDialog(record) {
				this.delObj = record
					this.show = true
			},
			onClick(e) {
				uni.publicJs.post('/auth/app/delete',
					{id: this.delObj.device_id},
					res=>{
						this.listinfo = this.listinfo.filter(item => item.device_id !== this.delObj.device_id);
						uni.showToast({
							title: '删除成功'
						})
						this.show = false
					}
				)
			},
			//设置maskClosable为true时（点击遮罩可关闭），需要配合@close事件一起使用，通过控制show来达到关闭效果
			onClose(e) {
				this.show = false
			},
			//获取应用管理列
			//删除接口
			getDelete(item){
				uni.showModal({
					content:'确认要删除该设备',
					success:(e)=>{
						if(e.confirm){
							uni.publicJs.get('/auth/app/delete',
								{id: this.id},
								res=>{
									this.deleteList = this.deleteList.filter(item => item.id !== itemId);
								}
							)
						}
					}
				})
			},
			openSelect(index) {
				//显示下拉框
				if(index===0){
					this.$refs.selectA.show()
				}else if(index===1){
					this.$refs.selectB.show()
				}
				this.showselect[index] = true;
			},
			selectClose(index){
				this.showselect[index]=false
			},
			chooseApp(item){
				this.curselect.app_name = item.text
				this.queryForm.app_id = item.value
				this.loadData()
			},
			chooseOnline(item){
				this.curselect.online = item.text
				this.queryForm.online = item.value
				this.loadData()
			},
			getAppList(){
				this.storeInfo.getAppList((data)=>{
					let arr=[]
					for(let val of data.values()){
						arr.push({
							text:val.name,
							value:val.id,
							checked:false
						})
					}
					this.applist=arr
				})
			},
			//设备列表
			loadData(){
				uni.publicJs.post('/app/index?cmd=loadDeviceList',{queryForm: this.queryForm},
					res=>{
						const currentTime = new Date().getTime()
						this.showloadmore = false
						this.listinfo = res.data.list.map(item=>{
							item.online=(parseInt(currentTime/1000) - item.heartbeat_at)<62?true:false
							return item
						})
						uni.stopPullDownRefresh()
					}
				)
			},
			gotoDetail(id){
				uni.navigateTo({
					url:'/pages/index/deviceDetail?id='+id
				})
			},
			addDevice(){
				uni.navigateTo({
					url:'/pages/index/saveDevice'
				})
			},
			handleEdit(item){
				uni.navigateTo({
					url:'/pages/index/saveDevice?id='+item.id
				})
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			//上拉刷新
			onRefresh() {
				console.log('下拉刷新');
			},
			// 执行刷新操作
			doRefresh() {
				this.refresherTrigger = true
			  console.log('正在刷新...');
			  // 这里执行刷新数据的逻辑
			  setTimeout(() => {
				// 刷新数据完成后，调用restore或abort方法结束刷新状态
				this.refresherTrigger = false
				this.restore();
			  }, 2000);
			},
			 // 刷新结束，恢复scroll-view
			restore() {
			  console.log('刷新结束');
			},
			 // 刷新结束，取消scroll-view的刷新状态
			abort() {
			  console.log('取消刷新');
			}
		},
	}
</script>

<style>
	/* .tab-select{position: fixed; z-index: 999;} */
	.fui-icon__ani {
		transform: rotate(180deg);
	}
	.fui-filter__icon {
		transition: all .15s linear;
	}
	.scroll-view {
	  height: 100%;
	}
</style>
